<!DOCTYPE html>
<html >
<head >
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css"  media="all"/>
<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all"/>
<link rel="stylesheet"  href="../../../css/common/loader.css" media="all"/>
<link rel="stylesheet"  href="../../../css/common/openshow.css" media="all"/>
</head>
<style>
	html{
		background-color:#fff;
		height: 100%;
    border-bottom: 2px solid #f2f2f2;
    box-sizing: border-box;
	}
	/* 上传照片样式 */
	.img-box button,.img-box .imgItem{display: inline-block;position: relative;}
	.img-box button:hover {border-color: #009688;cursor: pointer;}
	.img-box button>img,.img-box .imgItem>img{width: 140px;height: 140px;}
	.img-box button,.img-box .imgItem{
		height: 140px;
		width: 140px;
		border: 2px solid #eee;
		box-sizing: border-box;
	}
	.layui-form-pane .photo-label{height: 140px;line-height:120px;}
</style>
<body>
<div class="layui-fluid">
		<div class="layui-card">
		<form class="layui-form layui-form-pane" id="saveForm" lay-filter="saveForm">
			<input type="hidden" name="languageType" value="1" id="languageType">
			<input type="hidden" name="whetherBuffet" value="1">
			<input type="hidden" name="catalogId" value="" id="catalogId">
			<input type="hidden" name="catalogIndexId" value="" id="catalogIndexId">
			<input type="hidden" name="whetherFirst" value="" id="whetherFirst">
			<input type="hidden" name="sortNo" value="" id="sortNo">
			<div class="layui-form-item" >
			    <label class="layui-form-label" style="width: 130px;" >言語</label>
					<div class="layui-btn-group" id="languageDiv"></div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label" style="width: 130px;" >コース名</label>
				<div class="layui-input-block" style="margin-left: 130px;">
					<input type="text" name="catalogName" placeholder="コース名を入力してください" lay-verify="required|max:50" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label" style="width: 130px;">価格</label>
				<div class="layui-input-block" style="margin-left: 130px;">
					<input type="text" name="buffetPrice" placeholder="価格を入力してください" lay-verify="required|integer|minInt:0|maxInt:10000000" autocomplete="off" class="layui-input price-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label" style="width: 130px;">時間帯</label>
				<div class="layui-input-block" style="margin-left: 130px;">
					<select name="mealType" lay-select-dict="meal_type" lay-select-title="NONE"   class="price-input">
								
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"  style="width: 130px;" >時間</label>
				<div class="layui-input-block" style="margin-left: 130px;">
					<input type="text" name="timeLimit"  lay-verify="required|integer|minInt:0|maxInt:1000" autocomplete="off" class="layui-input price-input">
				</div>
			</div>
			<div class="layui-form-item" id="printBox">
				<label class="layui-form-label" style="width: 130px;" >プリンターID</label>
				<div class="layui-input-block" style="margin-left: 130px;">
					<select name="printNum"  id="printNum"></select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"  style="width: 130px;" >注文制限</label>
				<div class="layui-input-block" style="margin-left: 130px;">
					<input type="text" name="limitNum" placeholder="一人当たりの一回で注文できる数" lay-verify="required|integer|minInt:1|maxInt:100" autocomplete="off" class="layui-input price-input">
				</div>
			</div>
			<!-- 配菜box -->
			<div class="cata-box" id="cata-box"></div>
			<!-- 添加配菜 -->
			<div class="layui-form-item">
				<div class="layui-input-block">
					<span class="layui-btn" id="addSpecs">追加</span>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label layui-textarea-label photo-label" style="width: 130px;">写真</label>
				<div class="layui-input-block img-box">
					<div class="imgItem">
						<img id="buffetImg" src="" alt="">
					</div>
					<button type="button" class="layui-btn" id="buffetImageUpload">写真を追加</button>
					<input type="hidden" id="buffetImage" name="buffetImage" />
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label layui-textarea-label" style="width: 130px;">紹介</label>
				<div class="layui-input-block" style="margin-left: 130px;">
					<textarea  lay-verify="max:1000" class="layui-textarea" name="buffetIntroduce"></textarea>
				</div>
			</div>
			
			<!-- 隐藏域 -->
			<div class="layui-form-item" style="display:none;">
			  <button class="layui-btn"  lay-submit="" lay-filter="saveSubmit">提交</button>
			</div>
		</form>
	</div>
</div>
<script   src="../../../layuiadmin/layui/layui.js"></script>
<script type="text/javascript" src="../../../lib/jQuery-2.2.0.min.js" ></script>
	<script>
		layui.config({
			base :  '../../../layuiadmin/' //静态资源所在路径
		}).extend({
			webplus : 'lib/webplus', //主入口模块
		}).use([ 'form','webplus','upload' ], function() {
		    var $ = layui.$, form = layui.form,  
		    upload=layui.upload,
		    webplus=layui.webplus;
			var $catalogIndexId = $('#catalogIndexId'),
					$sortNo = $('#sortNo'),
					$catalogId = $('#catalogId');
			$whetherFirst = $('#whetherFirst');
			$cataBox = $("#cata-box");	// 自助餐规格box
			$addCata = $("#addSpecs"); //自助餐追加按钮
		    
			var initPrintNum;
			webplus.uploadImage('buffetImageUpload',{filePrefix:'M'},'buffetImage','buffetImg');
			//初始化根据id获取数据 
			webplus.initSelect('saveForm',webplus.doAjax('buss/menuCatalog/show',{catalogIndexId:webplus.getUrlType().id,languageType:'1',queryWay:'1'},'','0','',function(res){
				if(webplus.isEmpty(res.data)) return false;
				var imgSrc = webplus.cxt() +"/file/showImage?fileName=" +res.data.buffetImage;
				 $("#buffetImg").attr("src", imgSrc);
				webplus.setFormData("saveForm",res.data);
				initPrintNum = res.data.printNum;
				setBuffetData(res.dataList,res.data.languageType);
				// +-----------------------------
				// |加载自助餐规格数据----三期
				// +-----------------------------
				//
			}));
			
			// 初始化语言 	
			webplus.doAjax('buss/menuCatalog/listLanguage','','','',3,function(data){
				var htmlStr='';
				for(var i=0;i<data.dataList.length;i++){
					var dict=data.dataList[i];
					if("1"==dict.itemCode){
						htmlStr+='<button type="button" data-code="'+dict.itemCode+'" class="layui-btn">'+dict.itemName+'</button>';
					}else{
						htmlStr+='<button type="button" data-code="'+dict.itemCode+'" class="layui-btn layui-btn-primary">'+dict.itemName+'</button>';
					}
				}
				$("#languageDiv").html(htmlStr);
				// 切换语言 
				$("#languageDiv>button").click(function(){
					var _this = $(this),$pb = $("#printBox");;
					var languageType = _this.data('code');
					// 如果当前按钮被选中
					if(_this.attr("class").indexOf('layui-btn-primary')<0) return false;
					
					if(languageType == "1"){
						$("#addSpecs").prop("disabled",false).removeClass("layui-btn-disabled");
						$(".price-input").prop("disabled",false).removeClass("layui-btn-disabled");
						$pb.show();
					}else{
						$("#addSpecs").prop("disabled",true).addClass("layui-btn-disabled");
						$(".price-input").prop("disabled",true).addClass("layui-btn-disabled");
						$pb.hide();
					}
					$("#languageType").val(languageType);
					_this.removeClass('layui-btn-primary').siblings("button").attr('class','layui-btn layui-btn-primary');
					// 切换语言请求数据
					ajaxResultData(languageType);
				});
			});
			
			function ajaxResultData(languageType){
				var data = {
					languageType:languageType,
					catalogIndexId:$catalogIndexId.val(),
					sortNo:$sortNo.val(),
					queryWay:'1'
				};
				webplus.doAjax('buss/menuCatalog/show',data,'','',3,function(res){
					// +-----------------------------
					// |根据返回的值设置规格----三期
					// +-----------------------------
					// if(webplus.isEmpty(res.dataList)){
					// 	$cataBox.empty();
					// }else{
					// 	setSpecData(res.dataList,languageType);
					// }
					
					if(!webplus.isEmpty(res.data)){
						delete res.data['catalogIndexId'];
						delete res.data['whetherFirst'];
						delete res.data['sortNo'];
						delete res.data['languageType'];
						var imgSrc = webplus.cxt() +"/file/showImage?fileName=" +res.data.buffetImage;
						 $("#buffetImg").attr("src", imgSrc);
						// 处理后的数据赋值
						webplus.setFormData("saveForm",res.data);
					}else{
						webplus.setFormData("saveForm",{
							catalogId:'',
							catalogName:'',
							printNum:'',
							catalogRemark:''
						});
					}
					if(!webplus.isEmpty(res.dataList)){
						$(".layui-table").show();
						// 根据返回的值设置规格
						setBuffetData(res.dataList,languageType);
					}else{
						$(".layui-table").hide();
					}
				});
			}
			
			// 初始化请求打印机数据
			webplus.doAjax('buss/menuCatalog/listPrinter','','','',3,function(res){
				if(!webplus.isEmpty(res.dataList)){
					var html = '<option value="">プリンターを選んでください</option>';
					for(var i=0;i<res.dataList.length;i++){
						var printNum = res.dataList[i]['printNum'];
						if(initPrintNum == printNum){
							html += '<option selected value="'+printNum+'">'+printNum+'</option>';
 						}else{
							html += '<option value="'+printNum+'">'+printNum+'</option>';
						}
					}
					$("#printNum").html(html);
					form.render('select');
				}
			});
			
			// +------------------
			// |根据数据加载自助餐规格信息----三期
			// +------------------
			function setBuffetData(res,type){
				var buffetHtml = "";
				if(type == "1"){
					for(var i=0;i<res.length;i++){
						var data = res[i];
						buffetHtml += '<div class="layui-form-item">'+
									'<label class="layui-form-label" style="width: 150px;">オプション（小）</label>'+
									'<div class="layui-input-inline" style="width: 210px;">'+
										'<input type="text" value="'+data.specName+'" class="layui-input specs-name"/>'+
									'</div>'+
									'<label class="layui-form-label price-ipt" style="width: 90px;">価格</label>'+
									'<div class="layui-input-inline" style="width: 150px;">'+
										'<input type="text" value="'+data.specPrice+'" lay-verify="required|integer|minInt:0|maxInt:10000000" class="layui-input specs-price"/>'+
									'</div>'+
									'<p style="display:none;" data-specid="'+data.specId+'" data-specindexid="'+data.specIndexId+'"></p>'+
									'<div class="layui-input-inline del-box"  style="width: 64px;">'+
										'<span class="layui-btn layui-btn-danger del-cata"  data-id="'+data.specIndexId+'">削除</span>'+
									'</div>'+
								'</div>';
					}
				}else{
					for(var i=0;i<res.length;i++){
						var data = res[i];
						buffetHtml += '<div class="layui-form-item">'+
									'<label class="layui-form-label" style="width: 150px;">オプション（小）</label>'+
									'<div class="layui-input-inline" style="width: 210px;">'+
										'<input type="text" value="'+data.specName+'" class="layui-input specs-name"/>'+
									'</div>'+
									'<label class="layui-form-label price-ipt" style="width: 90px;">価格</label>'+
									'<div class="layui-input-inline" style="width: 150px;">'+
										'<input type="text" disabled value="'+data.specPrice+'" lay-verify="required|integer|minInt:0|maxInt:10000000" class="layui-input specs-price layui-btn-disabled"/>'+
									'</div>'+
									'<p style="display:none;" data-specid="'+data.specId+'" data-specindexid="'+data.specIndexId+'"></p>'+
								'</div>';
					}
				}
				$cataBox.html(buffetHtml);
			}
			
			// +------------------
			// |添加配菜----三期
			// +------------------
			$addCata.click(function(){
				var cataHtml = '<div class="layui-form-item" >'+
									'<label class="layui-form-label" style="width: 150px;">オプション（小）</label>'+
									'<div class="layui-input-inline" style="width: 210px;">'+
										'<input type="text" class="layui-input specs-name"/>'+
									'</div>'+
									'<label class="layui-form-label price-ipt" style="width:90px;">価格</label>'+
									'<div class="layui-input-inline" style="width: 150px;">'+
										'<input type="text" lay-verify="required|integer|minInt:0|maxInt:10000000" class="layui-input specs-price"/>'+
									'</div>'+
									'<div class="layui-input-inline del-box"  style="width: 64px;">'+
										'<span class="layui-btn layui-btn-danger del-cata">削除</span>'+
									'</div>'+
								'</div>';
				$cataBox.append(cataHtml);
				return false;
			});
			
			// +------------------
			// |删除配菜----三期
			// +------------------
			$cataBox.on("click",".layui-form-item .del-cata",function(e){
				var _this = this;
				specIndexId = $(_this).data("id");
				// 如果步骤规格为空,说明没有提交过,直接删除
				if(webplus.isEmpty(specIndexId)){
					$(_this).parents(".layui-form-item").remove();
				}else{
					var paramData={};
					paramData.id=specIndexId;
					webplus.doAjax('buss/buffetCatalog/removeBuffetSpec', paramData,'本欄の仕様を削除するか否か？', '0','',function(){
						$(_this).parents(".layui-form-item").remove();
					});

					
				}
			});
			// +------------------
			// |获取配菜信息----三期
			// +------------------
			function getSpecsData(){
				var specsArr = [];
				// 遍历添加的配菜
				$cataBox.find(".layui-form-item").each(function(){
					var _this = $(this);
					specsArr.push({
						specId:_this.find("p").data('specid'),
						specIndexId:_this.find("p").data('specindexid'),
						specName: _this.find(".specs-name").val(),
						specPrice: _this.find(".specs-price").val()
					});
				});
				return specsArr;
			}
			
			//提交表单
			form.on('submit(saveSubmit)', function(data) {
				var paramData = data.field;
				
				// +-------------------
				// |获取自助餐规格数据--------三期
				// +-------------------
				var stepSpecArray=getSpecsData();
				if(stepSpecArray.length>0){
					// 转换数据
					paramData.specJson= JSON.stringify(stepSpecArray);
				}
				
				// +--------------end------------------
				
				webplus.doAjax('buss/menuCatalog/save', paramData,'', '', '1',function(res){
					var data = res.data;
					// 如果是日本语
					if(data.languageType == "1"){
						parent.$("body").find('[lay-submit]').click();
						// 此catalogIndexId用于对有没有添加日本语的判断
						$catalogIndexId.val(data.catalogIndexId);
						$sortNo.val(data.sortNo);
						$whetherFirst.val(data.whetherFirst);
						// 重置步骤规格(因为保存后步骤规格有了specIndexId，要做删除步骤规格操作，所以要重置)----三期
						//setSpecData(res.dataList,paramData.languageType);
					}
					$catalogId.val(data.catalogId);
				});
				return false;
			});
		});

	</script>
</body>
</html>